<div class="game-container">
    <div class="game-info">
        <span>得分: <span id="memoryScore">0</span></span>
        <span>时间: <span id="memoryTime">60</span>s</span>
        <span>匹配: <span id="memoryMatches">0</span>/8</span>
    </div>
    <div class="memory-grid" id="memoryGrid"></div>
    <div class="game-controls">
        <button class="btn btn-primary" onclick="startMemory()">开始游戏</button>
    </div>
</div>

<script>
let memoryGame = {
    cards: [],
    flippedCards: [],
    matchedPairs: 0,
    score: 0,
    timeLeft: 60,
    gameRunning: false,
    gameTimer: null,
    symbols: ['🍎', '🍌', '🍇', '🍓', '🍑', '🍒', '🥝', '🍍']
};

function initMemory() {
    memoryGame.cards = [];
    memoryGame.flippedCards = [];
    memoryGame.matchedPairs = 0;
    memoryGame.score = 0;
    memoryGame.timeLeft = 60;
    memoryGame.gameRunning = false;
    
    updateDisplay();
    createCards();
}

function createCards() {
    const grid = document.getElementById('memoryGrid');
    grid.innerHTML = '';
    
    // 创建卡片对
    const cardPairs = [...memoryGame.symbols, ...memoryGame.symbols];
    
    // 洗牌
    for (let i = cardPairs.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cardPairs[i], cardPairs[j]] = [cardPairs[j], cardPairs[i]];
    }
    
    // 创建卡片元素
    cardPairs.forEach((symbol, index) => {
        const card = document.createElement('div');
        card.className = 'memory-card';
        card.dataset.index = index;
        card.dataset.symbol = symbol;
        card.onclick = () => flipCard(index);
        
        grid.appendChild(card);
    });
}

function startMemory() {
    if (memoryGame.gameRunning) return;
    
    initMemory();
    memoryGame.gameRunning = true;
    
    memoryGame.gameTimer = setInterval(() => {
        memoryGame.timeLeft--;
        updateDisplay();
        
        if (memoryGame.timeLeft <= 0) {
            endMemory();
        }
    }, 1000);
}

function flipCard(index) {
    if (!memoryGame.gameRunning) return;
    
    const card = document.querySelector(`[data-index="${index}"]`);
    
    if (card.classList.contains('flipped') || card.classList.contains('matched')) {
        return;
    }
    
    if (memoryGame.flippedCards.length >= 2) {
        return;
    }
    
    // 翻转卡片
    card.classList.add('flipped');
    card.textContent = card.dataset.symbol;
    memoryGame.flippedCards.push(index);
    
    if (memoryGame.flippedCards.length === 2) {
        checkMatch();
    }
}

function checkMatch() {
    const [index1, index2] = memoryGame.flippedCards;
    const card1 = document.querySelector(`[data-index="${index1}"]`);
    const card2 = document.querySelector(`[data-index="${index2}"]`);
    
    if (card1.dataset.symbol === card2.dataset.symbol) {
        // 匹配成功
        card1.classList.add('matched');
        card2.classList.add('matched');
        memoryGame.matchedPairs++;
        memoryGame.score += 20;
        
        // 检查是否完成
        if (memoryGame.matchedPairs === 8) {
            setTimeout(() => {
                endMemory(true);
            }, 500);
        }
    } else {
        // 匹配失败
        setTimeout(() => {
            card1.classList.remove('flipped');
            card2.classList.remove('flipped');
            card1.textContent = '';
            card2.textContent = '';
        }, 1000);
    }
    
    memoryGame.flippedCards = [];
    updateDisplay();
}

function updateDisplay() {
    document.getElementById('memoryScore').textContent = memoryGame.score;
    document.getElementById('memoryTime').textContent = memoryGame.timeLeft;
    document.getElementById('memoryMatches').textContent = memoryGame.matchedPairs;
}

function endMemory(completed = false) {
    memoryGame.gameRunning = false;
    
    if (memoryGame.gameTimer) {
        clearInterval(memoryGame.gameTimer);
    }
    
    if (completed) {
        memoryGame.score += memoryGame.timeLeft * 2; // 时间奖励
    }
    
    const message = completed 
        ? `恭喜完成！得分：${memoryGame.score}` 
        : `时间到！得分：${memoryGame.score}`;
    
    const name = prompt(`${message}\n请输入你的名字：`);
    if (name && name.trim()) {
        submitScore('memory', name.trim(), memoryGame.score);
    }
    
    initMemory();
}

// 初始化
initMemory();
</script>

<style>
.memory-grid {
    max-width: 400px;
}

.memory-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 2rem;
    transition: all 0.3s ease;
    user-select: none;
}

.memory-card.flipped {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    transform: rotateY(180deg);
}

.memory-card.matched {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    animation: pulse 0.5s;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .memory-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 300px;
    }
    
    .memory-card {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}
</style>